Code Playground

<h1 class="drink-milk">
  <span class="skate">🛼</span>
  <span class="word">drink</span>
  <span class="word">milk</span>
  <span class="word">and</span>
  <span class="word">kick</span>
  <span class="word">🍑</span>
  <span class="word">.</span>
</h1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="floor"></div>

</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

body {
  margin: 0;
  height: 100dvh;
  perspective: 460px;
  perspective-origin: 50% 54%;
  overflow: hidden;
  background:
    radial-gradient(
      circle at -20% bottom,
      #111, transparent 40%
    ),
    radial-gradient(
      circle at 120% bottom,
      #111, transparent 40%
    ),
    radial-gradient(
      circle at top right,
      #429, transparent
    ),
    radial-gradient(
      circle at top left,
      #a35 30%, #000
    );
}

.floor {
  width: 100dvw;
  height: 2500dvh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform:
    translate(-50%, -50%)
    rotateX(90deg)
    translateZ(-52px);
  background:
    repeating-linear-gradient(
      35deg,
      transparent,
      hotpink, pink 80px, 
      transparent 120px,
      transparent 200px
    ),
    repeating-linear-gradient(
      to bottom,
      violet,
      #104a, #2068 40px,
      rebeccapurple 80px,
      violet 160px
    );
  background-size: 200% 200%;
  animation: floor 70s linear infinite;
}

@keyframes floor {
  to {
    transform:
      translate(-50%, -50%)
      rotateX(90deg)
      translateZ(-52px)
      translateY(13%);
  }
}

.drink-milk {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% 120%;
  width: 100%;
  padding: 10dvmin;
  font-size: 7dvmin;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  letter-spacing: -.08em;
  word-spacing: .05em;
}

.drink-milk .skate,
.drink-milk .word {
  position: absolute;
  translate: -50% -50%;
  color: #fff3;
  padding: 1em;
  background: radial-gradient(
    circle at left center,
    #ff0018,
    #edff6e 50%
  );
  background-clip: text;
  background-size: 200% 200%;
}

.drink-milk .word {
  visibility: hidden;
  text-align: center;
}

.drink-milk:hover .skate {
  opacity: 0;
}

.drink-milk:hover .word {
  animation: word 1.5s linear infinite;
}

:nth-child(1 of .drink-milk .word) {
  animation-delay: 0;
}

:nth-child(2 of .drink-milk .word) {
  animation-delay: .25s
}

:nth-child(3 of .drink-milk .word) {
  animation-delay: .5s;
}

:nth-child(4 of .drink-milk .word) {
  animation-delay: .75s;
}

:nth-child(5 of .drink-milk .word) {
  animation-delay: 1s;
}

:nth-child(6 of .drink-milk .word) {
  animation-delay: 1.25s;
}

@keyframes word {
  from, 10%, 27%, to {
    visibility: hidden;
  }
  20% {
    visibility: visible;
  }
}

.aircraft {
  position: absolute;
  width: 100%;
  top: -10dvh;
  opacity: 0;
  filter:
    saturate(4)
    contrast(10)
    blur(0)
    hue-rotate(60deg);
  transition: all 1s .5s;
  transform: translateZ(0);
}

.drink-milk:hover ~ .aircraft {
  opacity: 1;
}

.codepen-canvas {
  --size: 25dvmin;
  --final-opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -70%;
  max-width: var(--size);
  max-height: var(--size);
  cursor: move;
  opacity: 0;
  background: radial-gradient(
    circle at center 55%,
    #000d 40%,
    #0000 40%
  );
  border-radius: 50%;
  animation:
    fade-in
      5s forwards;
}

.jigglypuff-canvas {
  --size: 15dvmin;
  position: absolute;
  top: 40%;
  left: -10%;
  translate: -100% -100%;
  max-width: var(--size);
  max-height: var(--size);
  cursor: move;
  opacity: 0;
  animation:
    jigglypuff
      15s cubic-bezier(.25,.46,.45,.94) infinite,
    fade-in
      5s forwards;
}

@keyframes jigglypuff {
  to {
    top: 15%;
    left: calc(100% + var(--size));
  }
}

@keyframes fade-in {
  to {
    opacity: var(--final-opacity, 1);
  }
}

.parrot {
  position: absolute;
  top: 10%;
  left: 110%;
  animation: parrot 8s 6s infinite;
}

@keyframes parrot {
  30%, to {
    left: -30%;
  }
}

.screen {
  --shine-opacity: 0;
  width: clamp(165px, 275px, 20dvw);
  aspect-ratio: 4/3.5;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-style: preserve-3d;
  overflow: hidden;
  transition: all .5s;
  background: url(https://assets.codepen.io/25387/noise.gif);
}

.screen::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: radial-gradient(
    ellipse 90% 140% at 50% 100%,
    transparent 60%,
    #000f, transparent
  );
  rotate: .5turn;
  opacity: var(--shine-opacity);
  z-index: 1;
}

.screen::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15%;
  background: radial-gradient(
    ellipse 85% 130% at 50% 100%,
    transparent 60%,
    #f6c6, transparent
  );
  opacity: var(--shine-opacity);
}

iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
}

svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

:nth-child(1 of .screen) {
  --shine-opacity: .5;
  transform:
    translate(-102.5%, 2.5%)
    rotateY(45deg);
}

:nth-child(2 of .screen) {
  --shine-opacity: 1;
  transform:
    translate(102.5%, 2.5%)
    rotateY(-45deg);
}

.tv {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(240px, 400px, 30%);
  vertical-align: middle;
  filter: hue-rotate(100deg) saturate(3);
  transition: all .5s;
  pointer-events: none;
}

:nth-child(1 of .tv) {
  translate: -130% -50%;
  transform-origin: left center;
}

:nth-child(2 of .tv) {
  translate: 30% -50%;
  rotate: y 180deg;
}

.lightning {
  position: absolute;
  top: 0;
  right: 0;
  translate: 20% -15%;
}

.lightning img {
  width: 20dvmin;
  rotate: 60deg;
  opacity: .2;
  scale: .6;
}

.lightning img:hover {
  opacity: 1;
}

console.log("Event Fired")
const interval = 3000

const demos = [
  'gONYmNM',
  'WNVvQOV',
  'rLEooV',
  'YzrMdBM',
  'mdbGvmr',
  'OJyGmWX',
  'yLWgwmR',
  'gxyoXW',
  'ExmqYym',
  'VqjvqR',
  'NWEgJbG',
  'NLRxvN',
  'VwKQENg',
  'jOWVOYL',
  'yLKwgyo',
  'aJExoe',
  'QWXOYvz',
  'JGEKJr'
]

let index = 1

const screens = Array.from(
  document.querySelectorAll('iframe')
)

const baseUrl = 'https://cdpn.io/pen/debug'

const setDemo = (screen, demoSlug) => {
  screen.src = `${baseUrl}/${demoSlug}`
  return screen
}

const preloadDemo = (slug) => {
  const iframe = document.createElement('iframe')
  const screen = setDemo(iframe, slug)
  screen.style.cssText += 'display: none; position: absolute;'
  document.body.appendChild(screen)
  return new Promise(resolve => {
    screen.onload = resolve
  })
  
}

const preloadDemos = () => {
  return Promise.all(demos.map(preloadDemo))
}

const start = () => {
  setInterval(async () => {
    const demoIndex = index === demos.length
      ? (index = 0)
      : index++
    const demo = demos[demoIndex]
    setDemo(screens[0], demo)
  }, interval)

setTimeout(() => {
    setInterval(async () => {
      const demoIndex = index === 0
        ? demos.length - 1
        : demos.length - index
      const demo = demos[demoIndex]
      setDemo(screens[1], demo)
    }, interval)
  }, interval / 3)
}

// Jigglypuff code taken from: 
// https://codepen.io/Adamanska/pen/gNYdRZ
const initJugglypuff = () => {
  let isSpinning = true;
  const TAU = Zdog.TAU;
  const pink = '#F6CED7';
  const blue = '#006885';
  const dark = '#383336';

const illo = new Zdog.Illustration({
    element: '.jigglypuff-canvas',
    rotate: { y: -TAU/14,},
    dragRotate: true,
    onDragStart: function() {
      isSpinning = false;
    },
  });

var body = new Zdog.Shape({
    addTo: illo,
    stroke: 380,
    color: pink,
  });

// ====== EYES =======
  var eyes = new Zdog.Group({
    addTo:illo,
    translate: { z: 160, x : -90 },
    rotate: { y: TAU/10 },
  })
  let eye = new Zdog.Ellipse({
    addTo: eyes,
    diameter: 120,
    stroke: 1,
    fill: true,
    color: '#fff',
  });
  let pupil = new Zdog.Ellipse({
    addTo: eyes,
    diameter: 80,
    stroke: 1,
    fill: true,
    color: blue,
  });
  let shine = new Zdog.Ellipse({
    addTo: eyes,
    diameter: 20,
    stroke: 1,
    translate: { x: 10, y: -20 },
    fill: true,
    color: '#fff',
  });
  eyes.copyGraph({
    addTo:illo,
    translate: { z: 160, x : 90 },
    rotate: { y: -TAU/10 },
  });

// ====== EARS ======
  var ears = new Zdog.Group({
    addTo: illo,
    translate: { z: 0, x : -130, y :-150},
    rotate: {z: 35}
  })
  let leftEar = new Zdog.Shape({
    addTo: ears,
    path: [
      { x:   0, y: -80 },
      { x:  60, y: 60 },
      { x: -60, y: 60 },
    ],
    fill: true,
    stroke: 20,
    color: pink,
  });
  let leftInside = new Zdog.Shape({
    addTo: ears,
    path: [
      { x:   0, y: -30 },
      { x:  30, y: 30 },
      { x: -50, y: 30 },
    ],
    fill: true,
    stroke: 10,
    color: dark,
    translate: { z: 8,  },
  });
  var otherEars = new Zdog.Group({
    addTo: illo,
    translate: { z: 0, x : 130, y :-150},
    rotate: {z: -35}
  })
  let rightEar = new Zdog.Shape({
    addTo: otherEars,
    path: [
      { x:   0, y: -80 },
      { x:  60, y: 60 },
      { x: -60, y: 60 },
    ],
    fill: true,
    stroke: 20,
    color: pink,
  });
  let rightInside = new Zdog.Shape({
    addTo: otherEars,
    path: [
      { x:   0, y: -30 },
      { x:  30, y: 30 },
      { x: -35, y: 30 },
    ],
    fill: true,
    stroke: 1,
    color: dark,
    //translate: { z: 8,  },
  });

// ====== FEET ======
  var feet = new Zdog.Group({
    addTo: illo,
    translate: { z: 30, x : -100, y :170},
    rotate: {y: -50}
  })
  let leftFoot = new Zdog.Shape({
    addTo: feet,
    path: [ // triangle
      { z:   0, x: 0 },
      { z:  50, x:  40 },
      { z: -40, x:  40 },
      { z: -40, x:  0 },
    ],
    fill: true,
    stroke: 70,
    color: pink,
  });
  //feet.copyGraph({
  //addTo: illo,
  //translate: { z: 30, x : 70, y :170},
  //rotate: {y: TAU/12}
  //})
  var feet2 = new Zdog.Group({
    addTo: illo,
    translate: { z: 0, x : 80, y :170},
    //rotate: {y: -50}
  })
  let rFoot = new Zdog.Shape({
    addTo: feet2,
    path: [ // triangle
      { z:   0, x: 0 },
      { z:  40, x:  40 ,},// pointe
      { z: -20, x:  20 },
      { z: -40, x:  0 },
    ],
    fill: true,
    stroke: 70,
    color: pink,
    rotate: {y: TAU/22},
  });

// ====== SMILE ======
  let smile = new Zdog.Ellipse({
    addTo: illo,
    diameter: 40,
    quarters: 2,
    stroke: 4,
    color: dark,
    rotate:{z: TAU/4},
    translate: { z: 190, x : 0, y :30},
  });

// ====== ARMS ======
  var arms = new Zdog.Group({
    addTo: illo,
    translate: { z: 0, x : -190, y :50},
    rotate: {y: -50}
  })
  let lArms = new Zdog.Shape({
    addTo: arms,
    path: [ // triangle
      { z:   40, x: -0, y:30 },
      { z:  50, x:  50 },
      { z: -20, x:  20 },
    ],
    fill: true,
    stroke: 50,
    color: pink,
  });
  var arms2 = new Zdog.Group({
    addTo: illo,
    translate: { z: 0, x : 190, y :50},
    rotate: {y: 50}
  })
  let rArms = new Zdog.Shape({
    addTo: arms2,
    path: [ // triangle
      { z:   40, x: 0, y:30 },
      { z:  -50, x:  -50 },
      { z: 20, x:  -20 },
    ],
    fill: true,
    stroke: 50,
    color: pink,
  });

// ====== HAIR ======
  var hair = new Zdog.Group({
    addTo: illo,
    translate: { z: 60, x : 0, y :-150},
    //rotate: {y: -50}
  })

var meche = new Zdog.Shape({
    addTo: hair,
    stroke: 150,
    color: pink,
  });

var hairSmallMid = new Zdog.Shape({
    addTo: hair,
    stroke: 120,
    color: pink,
    translate: { z: 30, x : 0, y :0},
  });

var hairSmall = new Zdog.Shape({
    addTo: hair,
    stroke: 120,
    color: pink,
    translate: { z: 50, x : 0, y :20},
  });

function animate() {
    illo.rotate.y += 0.005;
    illo.rotate.z += 0.00125;
    illo.updateRenderGraph();
    requestAnimationFrame( animate );
  }
  animate();
}

// codepen logo is taken from:
// https://codepen.io/danhearn/pen/XwQrXJ
const initCodepen = (element) => {
  const illo = new Zdog.Illustration({
    element: '.codepen-canvas',
    dragRotate: true,
    onDragStart: function() {
      isSpinning = false
    },
    onDragEnd: function() {
      isSpinning = true
    },
  });

const color = '#fff'
  const thickness = 15
  const size = 60
  const spacing = size*1.1

let anchor = new Zdog.Anchor({
    addTo: illo,
    scale: 1,
    rotate: { z: -Zdog.TAU/8, x: -Zdog.TAU/7 },
  });

const bottomRect = new Zdog.Rect({
    addTo: anchor,
    width: size*2,
    height: size*2,
    stroke: thickness,
    color: color
  });

bottomRect.copy({
    translate: { z: spacing },
    color: color
  });

const topLine = new Zdog.Shape({
    addTo: bottomRect,
    translate: { x: size, y: size },
    path: [
      { z: 0 },
      { z: spacing },
    ],
    stroke: thickness,
    color: color,
  });

topLine.copy({
    translate: { x: size, y: -size },
    color: color
  });

topLine.copy({
    translate: { x: -size, y: size },
    color: color
  });

topLine.copy({
    translate: { x: -size, y: -size },
    color: color
  });

function animate() {
    illo.updateRenderGraph();
    illo.rotate.y += 0.025;
    requestAnimationFrame( animate );
  }

animate();
}

preloadDemos()
start()
initJugglypuff()
initCodepen()

Frontend Forever App